<template>
  <view class="content">
    <mescroll-uni @down="downCallback" @up="upCallback" :up="upOption" @scroll="scroll" @init="mescrollInit" @topclick="topClick">
      <view class="main">
        <view class="swiperUl">
          <view class="swiperLi">
            <view class="scroll-item-image-box">
              <image src="/static/img/img.jpg" mode="aspectFill" class="scroll-item-image"></image>
            </view>
            <view class="scroll-item-text-box">
              <view class="box-h">
               士大夫士大夫撒旦
              </view>
              <view class="box-span">
                <text class="box-date">2018-02-03</text>
                <text class="iconfont el-icon-extend-liulanliang"></text>
                <text class="box-see">100</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
  import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	export default {
    components: {MescrollUni},
		data() {
			return {
          tabId:'',
          mescroll: null, //mescroll实例对象
          isShowSticky: false,
          current: 0,
          navTop: null,
          scrollHeight: 0,
          height: 0, //.lis高度（滚动框高度）
          dataList: [],
          animationData: {},
          upOption: {
          	onScroll: true, // 是否监听滚动事件, 默认false (配置为true时,可@scroll="scroll"获取到滚动条位置和方向)
            page: {
              num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
              size: 10, // 每页数据的数量,默认10
              empty: {
                use: true,
                tip: '暂无相关数据'
              }
            },
          }
      }
		},
		onLoad() {
			setTimeout(function () {
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
      change(index) {
        console.log(index)
      	this.current = index;
        this.tabId = this.tabs[index].id
        // 记录前一个菜单的数据
        this.dataList = []
        // this.mescroll.resetUpScroll()
      },
      mescrollInit(mescroll) {
      	// this.mescroll = mescroll;
      },
      /*下拉刷新的回调 */
      downCallback(mescroll) {
        // this.dataList = []
      	// mescroll.resetUpScroll()// 下拉刷新重置数据
      },
      upCallback(mescroll) {
      	//联网加载数据
        // let pageNum = mescroll.num; // 页码, 默认从1开始
        // let pageSize = mescroll.size; // 页长, 默认每页10条
        // // debugger
        // let params = {
        //   offset: pageNum - 1,
        //   columnId: this.tabId,
        //   limit: pageSize
        // }
        // this.$api.getAticle(params).then(res => {
        // 	if (res && res.code === '200') {
        //     let data = res.data
        //     let curPageData = data.items
        //       mescroll.endBySize(curPageData.length, data.total);
        //       // mescroll.endSuccess()
        //       this.dataList=this.dataList.concat(curPageData);
        // 	} else {
        //     mescroll.endErr()
        //   }
        // })   	
      },
      setNavTop(){
      	let view = uni.createSelectorQuery().in(this).select('#tabInList');
        console.log(view)
      	view.boundingClientRect(data => {
      		// console.log('tabInList基本信息 = ' + JSON.stringify(data));
      		this.navTop = data.top // 到屏幕顶部的距离
      	}).exec();
      },
      // 滚动事件 (需在up配置onScroll:true才生效)
      scroll(mescroll){
      	// console.log('滚动条位置 = ' + mescroll.getScrollTop() + ', navTop = ' + this.navTop);
      	// 菜单悬浮的原理: 监听滚动条的位置大于某个值时,控制顶部菜单的显示和隐藏
      	if (mescroll.getScrollTop() >= this.navTop - uni.getSystemInfoSync().statusBarHeight) {
      		this.isShowSticky = true // 显示悬浮菜单
      	} else {
      		this.isShowSticky = false // 隐藏悬浮菜单
      	}
      },
      // 点击回到顶部按钮时,先隐藏悬浮菜单,避免闪动
      topClick(){
      	this.isShowSticky = false
      }
		},
    filters: {
      time (time) {
        let dt = time
        if (!dt || isNaN(parseInt(dt))) return ''
        let date = new Date(parseInt(dt))
        let y = date.getFullYear()
        let MM = date.getMonth() + 1
        MM = MM < 10 ? ('0' + MM) : MM
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        return y + '-' + MM + '-' + d
      }
    }
	}
</script>

<style scoped>
  .content {
    width: 100%;
    height: 100%;
    background: #F5F5F5 url(../../static/img/bg.jpg) no-repeat;
    background-size: 100% auto;
  }
  .main {
    background: #F5F5F5
  }
  .QS-tabs-box {
    margin-bottom: 23rpx;
    width: 100%;
    position: sticky;
    top: var(--status-bar-height);
    z-index: 10;
    background-color: white;
    border-bottom: 1rpx solid #F4F4F4;
    background: #fff;
  }
  .swiperUl {
    min-height: 100rpx;
    background: #fff;
  }
  .swiperUl {
  	display: flex;
  	flex-direction: column;
  	width: 100%;
  	padding:27rpx 30rpx;
  	box-sizing: border-box;
  }
  .swiperLi {
  	display: flex;
  	flex-direction: row;
    padding-bottom: 12rpx;
    margin-bottom: 21rpx;
    border-bottom: 1px solid #F4F4F4;
  }
  .scroll-item-image-box{
    margin-right: 20rpx;
    flex-grow: 0;
  }
  .scroll-item-text-box{
  	flex-grow: 1;
  	display: flex;
  	flex-direction: column;
  	font-size: 28rpx;
  	font-weight: bold;
  }
  .scroll-item-image{
  	border-radius: 4rpx;
  	width: 125rpx;
  	height: 140rpx;
  }
  .box-h {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow : hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  	margin-bottom: 25rpx;
  	line-height: 45rpx;
    min-height: 90rpx;
  	font-size: 28rpx;
  	color: #303030;
  }
  .box-span {
  	font-weight: normal;
  	font-size: 24rpx;
  	color: #C0C0C0;
  }
  .box-date {
  	padding-right: 38rpx;
  }
  .status {
    float: right;
    width: 96rpx;
    height: 40rpx;
    line-height: 40rpx;
    border-radius: 20rpx;
    background: #00B7F0;
    font-size: 24rpx;
    color: #fff;
    text-align: center;
  }
  .status.status-ing {
    background: #F15153;
  }
  .status.status-end {
    background: #8E8E8E;
  }
</style>
